<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Sortable via jQuery</title>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <style>
        .row {
            display: flex;
            width: 200px;
        }

        .column {
            flex: 50%;
            margin-right: 10px;
        }

        .list-group {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 100%;
        }

        .list-group li {
            margin: 0 0 2px 0;
            padding: 0.5em;
            height: 20px;
        }

        .tinted {
            background-color: #ffbbbb;
        }

    </style>

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#sortable1, #sortable2").sortable({
                placeholder: "ui-state-highlight",
                connectWith: ".list-group"
            });
        });
    </script>
</head>
<body>

<h1>Sortable using jQuery</h1>


<div class="row">
    <div class="column">
        <ul id="sortable1" class="list-group">
            <li class="ui-state-default" id="item-1-1">1-1</li>
            <li class="ui-state-default" id="item-1-2">1-2</li>
            <li class="ui-state-default" id="item-1-3">1-3</li>
            <li class="ui-state-default" id="item-1-4">1-4</li>
            <li class="ui-state-default" id="item-1-5">1-5</li>
        </ul>
    </div>
    <div class="column">
        <ul id="sortable2" class="list-group">
            <li class="ui-state-default tinted" id="item-2-1">2-1</li>
            <li class="ui-state-default tinted" id="item-2-2">2-2</li>
            <li class="ui-state-default tinted" id="item-2-3">2-3</li>
            <li class="ui-state-default tinted" id="item-2-4">2-4</li>
            <li class="ui-state-default tinted" id="item-2-5">2-5</li>
        </ul>
    </div>
</div>

</body>
</html>
